<!DOCTYPE html>
<html>
  <head>
    <title>{{title}}</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.1/socket.io.min.js" integrity="sha512-iqRVtNB+t9O+epcgUTIPF+nklypcR23H1yR1NFM9kffn6/iBhZ9bTB6oKLaGMv8JE9UgjcwfBFg/eHC/VMws+g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <style>
      {{{style}}}
    </style>
  </head>
  <body class="{{bodyClasses}}">
    <div class="content">
      <div class="header">
        <b>{{title}}</b>
        <div id="span-controls" class="span-controls"></div>
      </div>
      <div class="container cpu">
        <div class="stats-column">
          <h5>CPU Usage</h5>
          <h1 id="cpuStat">- %</h1>
        </div>
        <div class="chart-container">
          <canvas id="cpuChart" width="400" height="100"></canvas>
        </div>
      </div>
      <div class="container mem">
        <div class="stats-column">
          <h5>Memory Usage</h5>
          <h1 id="memStat">- %</h1>
        </div>
        <div class="chart-container">
          <canvas id="memChart" width="200" height="100"></canvas>
        </div>
      </div>
      <div class="container heap-size">
        <div class="stats-column">
          <h5>Heap Usage</h5>
          <h1 id="heapStat">- %</h1>
        </div>
        <div class="chart-container">
          <canvas id="heapChart" width="200" height="100"></canvas>
        </div>
      </div>
      <div class="container load">
        <div class="stats-column">
          <h5>One Minute Load Avg</h5>
          <h1 id="loadStat">-</h1>
        </div>
        <div class="chart-container">
          <canvas id="loadChart" width="200" height="100"></canvas>
        </div>
      </div>
      <div class="container eventLoop">
        <div class="stats-column">
          <h5>Spent in Event Loop</h5>
          <h1 id="eventLoopStat">ms</h1>
        </div>
        <div class="chart-container">
          <canvas id="eventLoopChart" width="200" height="100"></canvas>
        </div>
      </div>
      <div class="container responseTime">
        <div class="stats-column">
          <h5>Response Time</h5>
          <h1 id="responseTimeStat">-</h1>
        </div>
        <div class="chart-container">
          <canvas id="responseTimeChart" width="200" height="100"></canvas>
        </div>
      </div>
      <div class="container rps">
        <div class="stats-column">
          <h5>Requests per Second</h5>
          <h1 id="rpsStat">-</h1>
        </div>
        <div class="chart-container">
          <canvas id="rpsChart" width="200" height="100"></canvas>
        </div>
      </div>
      <div class="container statusCodes">
        <div class="stats-column">
          <h5>Status Codes</h5>
          <h6 class="status-code status-code-2xx">2xx</h6>
          <h6 class="status-code status-code-3xx">3xx</h6>
          <h6 class="status-code status-code-4xx">4xx</h6>
          <h6 class="status-code status-code-5xx">5xx</h6>
        </div>
        <div class="chart-container">
          <canvas id="statusCodesChart" width="200" height="100"></canvas>
        </div>
      </div>
      <div class="container healthChecks">
        {{#each healthCheckResults}}
        <div class="health-check-row">
          <div class="health-check-title-column">
            <h5><a href="{{path}}">{{path}}</a></h5>
          </div>
          <div class="health-check-status-container {{status}}">
            <h1>{{status}}</h1>
          </div>
        </div>
        {{/each}}
      </div>
      <div class="footer">
        <p>Status page made by <a href="https://dynobase.dev">Dynobase</a> with &#9829; with Socket.io & Chart.js</p>
      </div>
    </div>
    <script>
      var port = '{{port}}';
      var socketPath = '{{socketPath}}';
      {{{script}}}
    </script>
  </body>
</html>
